<!-- src/components/Navbar.vue -->
<template>
  <el-menu
    :default-active="activeIndex"
    class="navbar-menu"
    mode="horizontal"
    :ellipsis="false"
    @select="handleSelect"
  >
    <!-- Logo 和首页链接 -->
    <el-menu-item index="/">
      <div class="navbar-brand">
        <!-- 使用简单的文本 Logo 或引入 SVG 组件 -->
        <!-- <PingPongIcon class="navbar-logo" /> --> <!-- 如果有单独的 Logo 组件 -->
        <span class="navbar-title">乒乓社区</span>
      </div>
    </el-menu-item>

    <!-- 导航链接 (可以扩展) -->
    <el-menu-item index="/posts">帖子</el-menu-item> <!-- 假设未来有帖子列表页 -->
    <el-menu-item index="/categories">板块</el-menu-item> <!-- 假设未来有板块列表页 -->

    <!-- 将剩余空间推到右边 -->
    <div class="flex-grow" />

    <!-- 未登录状态下的菜单项 -->
    <template v-if="!authStore.isAuthenticated">
      <el-menu-item index="/login">登录</el-menu-item>
      <el-menu-item index="/register">注册</el-menu-item>
    </template>

    <!-- 已登录状态下的菜单项 -->
    <template v-else>
        <el-menu-item v-if="authStore.currentUser?.username === 'lgt'" index="/announcements/create">
        发布公告
      </el-menu-item>
      <!-- *** 新增: 发帖按钮 *** -->
    <el-menu-item index="/posts/create">
      <el-icon><EditPen /></el-icon>
      <span>发帖</span>
    </el-menu-item>
      <!-- 用户中心下拉菜单 -->
      <el-sub-menu index="user-center">
        <template #title>
          <!-- 用户头像或默认图标 -->
          <el-avatar
            v-if="authStore.currentUser?.avatarUrl"
            :src="authStore.currentUser.avatarUrl"
            size="small"
            class="navbar-avatar"
          />
          <el-avatar v-else size="small" class="navbar-avatar">
            {{ authStore.currentUser?.username?.charAt(0).toUpperCase() || 'U' }}
          </el-avatar>
          <span class="navbar-username">{{ authStore.currentUser?.username }}</span>
        </template>
         <el-menu-item index="/profile">个人中心</el-menu-item>
      <el-menu-item index="/profile/posts">我的帖子</el-menu-item>
      <el-menu-item index="/profile/replies">我的回复</el-menu-item>
      <el-menu-item index="/profile/favorites">我的收藏</el-menu-item>
        <!-- <el-menu-item index="/settings">设置</el-menu-item> -->
        <el-menu-item index="/logout">退出登录</el-menu-item>
      </el-sub-menu>
    </template>
  </el-menu>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
// import PingPongIcon from './PingPongIcon.vue' // 如果有单独的 Logo 组件
import { EditPen } from '@element-plus/icons-vue' // 引入发帖图标

const route = useRoute()
const router = useRouter()
const authStore = useAuthStore()

// 计算当前激活的菜单项索引 (简单实现，可根据路由动态匹配)
const activeIndex = computed(() => route.path)

// 处理菜单项选择
const handleSelect = (key) => {
  if (key === '/logout') {
    // 处理登出逻辑
    authStore.logout()
    // 跳转到登录页或首页
    router.push('/login').catch(err => {
      // 忽略重复导航的错误 (例如已经在 /login 页面点击退出)
      if (err.name !== 'NavigationDuplicated') {
        console.error('Navigation error after logout:', err)
      }
    })
  } else {
    // 跳转到其他页面
    router.push(key).catch(err => {
      // 忽略重复导航的错误
      if (err.name !== 'NavigationDuplicated') {
        console.error('Navigation error:', err)
      }
    })
  }
}
</script>

<style scoped>
.navbar-menu {
  /* ... existing styles ... */
  background-color: #ffffff; /* 白色背景 */
  border-bottom: 1px solid #e4e7ed; /* 底部细线 */
  padding: 0 20px; /* 左右内边距 */
}
.navbar-brand {
  /* ... existing styles ... */
  font-weight: bold;
  font-size: 1.3em;
  color: #303133; /* 深灰色文字 */
}
.navbar-title {
  /* ... existing styles ... */
  color: inherit; /* 继承父级颜色 */
}
/* 悬停效果 */
:deep(.el-menu-item:hover), :deep(.el-sub-menu__title:hover) {
  background-color: #f5f7fa !important; /* 悬停背景色 */
}
/* 激活项效果 */
:deep(.el-menu-item.is-active) {
  color: #409eff !important; /* Element Plus 主题色 */
  border-bottom: 2px solid #409eff !important; /* 底部激活线 */
}
.flex-grow {
  flex-grow: 1;
}
.navbar-avatar {
  margin-right: 8px;
}
.navbar-username {
  margin-left: 4px; /* 头像和用户名之间的小间距 */
}
/* 可以在这里添加更多自定义样式，例如悬停效果等 */

/* --- 新增: 响应式设计 ---
     *** 添加针对不同屏幕尺寸的样式 ***
*/
@media (max-width: 1200px) {
  .navbar-menu {
    padding: 0 15px;
  }
  .navbar-title {
    font-size: 1em;
  }
}

@media (max-width: 992px) {
  .navbar-menu {
    padding: 0 10px;
  }
  .navbar-title {
    font-size: 0.95em;
  }
}

@media (max-width: 768px) {
  .navbar-menu {
    padding: 0 5px;
  }
  .navbar-title {
    font-size: 0.9em;
  }
  /* 可以在这里添加汉堡菜单样式 */
  /* .navbar-menu .el-menu-item,
  .navbar-menu .el-sub-menu {
    display: none;
  } */
  /* .navbar-menu .el-menu-item.is-active,
  .navbar-menu .el-sub-menu.is-active {
    display: block;
  } */
}

@media (max-width: 576px) {
  .navbar-menu {
    padding: 0 2px;
  }
  .navbar-title {
    font-size: 0.85em;
  }
}
/* --- --- */
</style>
